<template>
	<view>
		<view class="phone-header">
			<image src="../images/lifepayBg.474226aa.png" mode="widthFix" style="width: 100%;display: flex;"></image>
			<view class="phone-header-tips">
				<view>
					<image src="../images/lifeTab01.png" mode="widthFix" style="display: flex;width: 40upx;"></image>
					
				</view>
				<text>油卡充值</text>
			</view>
		</view>
		<view style="padding: 20upx;margin-top: -140upx;position: relative;z-index: 22;">
			<view class="phone-container">
				<view class="phone-container-top">
					<view class="phone-container-top_title">
						<text>油卡官方充值</text>
					</view>
				</view>
				<view class="phone-container-input">
					<input v-model="account" placeholder="请填写油卡账号">
				</view>
				<view class="phone-container-input">
					<input v-model="phone" type="number" maxlength="11" placeholder="请填写油卡账号预留手机号码">
				</view>
				<!-- <view class="phone-container-input">
					<input v-model="password" placeholder="请输入油卡密码">
				</view> -->
				<view class="phone-container-group">
					<view class="phone-container-group_title">
						<text>充值套餐</text>
					</view>
					<view class="phone-container-group_list">
						<view class="phone-container-group_list-item base-3" :class="packageSelect==item.id?'select':''" v-for="item in packageList" :key="item.id" @click="packageSelect = item.id;realMoney=item.now_money">
							<view>
								<text style="font-size: 38upx;font-weight: bold;">{{item.name}}</text>
							</view>
							<view style="margin-top: 0;">
								<text style="font-size: 24upx;padding: 0 10upx;">¥{{item.now_money}}</text>
							</view>
						</view>
						<view class="base-3"></view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 130upx;"></view>
		<view class="phone-fix-btm">
			<view class="phone-fix-btm-left">
				<view>
					合计：<text>¥{{realMoney||0}}</text>
				</view>
			</view>
			<view class="phone-fix-btm-btn">
				<view>
					<u-button type="error" shape="circle" @click="onSubmit">
						<text>立即购买</text>
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				packageList:[
					// {name:"中国移动",id:1,key:"yd",price:"97.30",relPrice:"100.00"}
				],
				packageSelect:0,
				phone:"",
				realMoney:"",
				password:"",
				account:""
			};
		},
		onLoad() {
			this.loadData();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods:{
			async loadData() {
				var that = this;
				//   判断申请通过跳转商铺首页
				app.get("ApiLifePay/setMeal", {
					type: "oil"
				}, function(res) {
					const res1 = res.data;
					that.packageList = res1;
				});
			},
			async pays(order_id){
				const params = {
					order_id:order_id,
					order_type:32,
					is_wechat:2,
					payment:11
				}
				const res = await this.$requestAll.thirds.lifePay(params,true)
				res.data.code = res.data.code.replace(/\%/g,"+");
				uni.navigateTo({
					url:"/other/pay/payCode?dd="+encodeURIComponent(JSON.stringify(res.data))
				})
			},
			onSubmit(){
				if(!uni.$u.trim(this.account)){
					uni.$u.toast("请填写油卡账号")
					return;
				}
				if(!uni.$u.test.mobile(this.phone)){
					uni.$u.toast("请填写正确测油卡预留手机号码")
					return;
				}
				// if(!uni.$u.trim(this.password)){
				// 	uni.$u.toast("请填写油卡密码")
				// 	return;
				// }
				if(this.packageSelect == 0){
					uni.$u.toast("请选择充值套餐")
					return;
				}
				uni.showLoading({
					mask:true
				})
				const params = {
					mobile:this.phone,
					money:this.realMoney,
					set_id:this.packageSelect,
					password:this.password,
					account:this.account
				}
				app.post('ApiLifePay/oilPay', params,
				 function(res) {
					app.showLoading(false);
					if (res.status == 0) {
						app.error(res.msg);
						return;
					}
					app.goto('/pages/pay/pay?id=' + res.data.payorderid);
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f9;
	}
	view{
		box-sizing: border-box;
	}
.phone-header{
	position: relative;
	&-tips{
		position: absolute;
		padding:10upx 16upx;
		border-radius: 80upx 80upx;
		background-color: #fee1e1;
		display: flex;
		align-items: center;
		bottom: 54%;
		left: 30upx;
		text{
			font-size: 28upx;
			color: #ff6767;
			padding-left: 10upx;
		}
	}
	
}
.phone-container{
	padding: 20upx;
	background-color: #fff;
	border-radius: 20upx 20upx;
	&-top{
		padding: 20upx;
		&-title{
			font-size: 28upx;
			font-weight: bold;
		}
	}
	&-input{
		border-bottom: 1px solid #ececec;
		padding: 20upx 20upx 10upx;
		margin-bottom: 20upx;
		input{
			color: #282828;
			font-size: 28upx;
		}
	}
	&-group{
		margin-top: 40upx;
		&_title{
			font-size: 26upx;
			font-weight: bold;
			margin: 20upx 0;
		}
		&_list{
			display: flex;
			width: 100%;
			justify-content: space-between;
			flex-wrap: wrap;
			&-item{
				border: 1px solid #ecebe6;
				border-radius: 10upx 10upx;
				font-size: 28upx;
				padding: 26upx 0upx;
				text-align: center;
				margin-bottom: 10upx;
			}
			.select{
				border: 1px solid #ff6767!important;
				color: #ff6767!important;
				background-color: #fffaf5;
			}
		}
	}
}
.base-4{
	width: 24%;
}
.base-3{
	width: 32%;
}
.phone-fav{
	position: relative;
	margin-top: 20upx;
	margin-bottom: 20upx;
	&-item{
		position: absolute;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 40upx;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		font-size: 26upx;
	}
}
.phone-notices{
	padding: 20upx 20upx;
	border-radius: 20upx 20upx;
	background-color: #fff;
	text{
		font-size: 28upx;
		font-weight: bold;
	}
}
.phone-fix-btm{
	position: fixed;
	width: 100%;
	height: 120upx;
	display: flex;
	align-items: center;
	background-color: #fff;
	bottom: 0;
	left: 0;
	padding: 0 30upx;
	&-left{
		flex: 1;
		font-size: 28upx;
		text{
			color: #ff6767;
			font-weight: bold;
			font-size: 33upx;
		}
	}
	&-btn{
		width:40%;
	}
}
</style>
